<html>
    <head>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <style type="text/css">
        <?php require_once("include/css/menu.css") ?>
                </style>
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
          <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
          <script src="http://localhost/crea/include/javascript/utils.js"></script>
          <script type="text/javascript" >
$(function() {
    var $mainNav = $('#main-nav'),
    navWidth = $mainNav.width();

    $mainNav.children('.main-nav-item').hover(function(ev) {
        var $this = $(this),
        $dd = $this.find('.main-nav-dd');

        // get the left position of this tab
        var leftPos = $this.find('.main-nav-tab').position().left;

        // get the width of the dropdown
        var ddWidth = $dd.width(),
        leftMax = navWidth - ddWidth;

        // position the dropdown
        $dd.css('left', Math.min(leftPos, leftMax) );

        // show the dropdown
        $this.addClass('main-nav-item-active');
    }, function(ev) {

        // hide the dropdown
        $(this).removeClass('main-nav-item-active');
    });
});
</script>
</head>
<body>
        <image src="include/images/logo.gif" style="height:60px; width:80px;" alt="logo">
            &nbsp;


        <a href="index.php?accion=logout" style="position: absolute; top: 50px; right: 170px; width: 200px;"><b>Logout</b></a>
    <ul id="main-nav">
    <li class="main-nav-item">
        <a href="#" class="main-nav-tab">Proyectos</a>
        <div class="main-nav-dd">
            <div class="main-nav-dd-column">
            <ul>
                <li>
        <?php
             echo '<a href="index.php?modulo=Proyecto&accion=misProyectos&idVoluntario='.$usuario->idVoluntario.'">
                 Mis Proyectos</a>';
        ?>
                </li>
                <li><a href="index.php?modulo=Proyecto&accion=proyectos">Lista de Proyectos</a></li>
                <li><a href="index.php?modulo=Proyecto&accion=programas">Lista de Programas</a></li>
                <li><a href="index.php?modulo=Proyecto&accion=verFormulario">Nuevo Proyecto</a></li>
                <li><a href="index.php?modulo=Proyecto&accion=verFormularioPrograma">Nuevo Programa</a></li>
            </ul>
            </div>
        </div>
    </li>
    <li class="main-nav-item">
        <a href="#" class="main-nav-tab">Voluntarios</a>
        <div class="main-nav-dd">
        <div class="main-nav-dd-column">
            <ul>
					<li><a href="#">Mis Proyectos</a></li>
					<li><a href="#">Proyectos</a></li>
                                        <li><a href="#">Programas</a></li>
                                        <li><a href="#">Nuevo Proyecto</a></li>
                                        <li><a href="#">Nuevo Programa</a></li>
            </ul>
          </div>
          </div>
    </li>
    <li class="main-nav-item">
        <a href="#" class="main-nav-tab">Beneficiarios</a>
        <div class="main-nav-dd">
        <div class="main-nav-dd-column">
            <ul>
					<li><a href="#">Mis Proyectos</a></li>
					<li><a href="#">Proyectos</a></li>
                                        <li><a href="#">Programas</a></li>
                                        <li><a href="#">Nuevo Proyecto</a></li>
                                        <li><a href="#">Nuevo Programa</a></li>
            </ul>
         </div>
         </div>
    </li>
    <li class="main-nav-item">
        <a href="#" class="main-nav-tab">Materiales</a>
        <div class="main-nav-dd">
        <div class="main-nav-dd-column">
            <ul>
					<li><a href="#">Mis Proyectos</a></li>
					<li><a href="#">Proyectos</a></li>
                                        <li><a href="#">Programas</a></li>
                                        <li><a href="#">Nuevo Proyecto</a></li>
                                        <li><a href="#">Nuevo Programa</a></li>
            </ul>
         </div>
         </div>
    </li>
    <li class="main-nav-item">
        <a href="#" class="main-nav-tab">Configuracion</a>
        <div class="main-nav-dd">
        <div class="main-nav-dd-column">
            <ul>
					<li><a href="#">Mis Proyectos</a></li>
					<li><a href="#">Proyectos</a></li>
                                        <li><a href="#">Programas</a></li>
                                        <li><a href="#">Nuevo Proyecto</a></li>
                                        <li><a href="#">Nuevo Programa</a></li>
            </ul>
         </div>
         </div>
    </li>
</ul>
</body>
</html>